import { template } from 'lodash-contrib';
<template>
  <el-container class="agent-select">
    <el-main class="sa-p-20" v-loading="loading">
		<div class="title">请按照上传模版进行上传
			<div class="xz"><a href="http://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/2024041110572177cf22074.xlsx" download>模版下载</a></div>
		</div>
      <el-form :model="form.model" :rules="form.rules" ref="formRef" label-width="120px">
		  
        <el-form-item label="上传文件" prop="file">
          <sa-uploader v-model="form.model.file" fileType="all"></sa-uploader>
          <div style="margin-left: 20px;" v-if="form.model.file">文件：{{
            form.model.file.slice(form.model.file.lastIndexOf('/') + 1) }}</div>
        </el-form-item>
		
      </el-form>
    </el-main>
    <el-footer class="sa-flex sa-row-right">
      <el-button @click=" emit('modalCallBack',{ event: 'confirm' })">取消</el-button>
      <el-button type="primary" @click="confirm" v-auth="'shop.admin.goods.goods.upload'">提交</el-button>
    </el-footer>
	
  </el-container>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, unref } from 'vue';
import { api } from '../goods.service.js';
import { checkUrl } from '@/sheep/utils/checkUrlSuffix';
import { cloneDeep } from 'lodash';
import { ElMessage, ElMessageBox } from 'element-plus';

const emit = defineEmits(['modalCallBack']);

const props = defineProps({
  modal: {
    type: Object,
  },
});
const loading = ref(false);

let formRef = ref(null);
const form = reactive({
  model: {
    file: '',
  },
  rules: {
    file: [{ required: true, message: '请上传文件', trigger: 'blur' }],
  }
});


const open = () => {
  ElMessageBox.alert(`
    This is a message. 
    <span style="color: blue; cursor: pointer;" onclick="window.location.href='http://example.com'">点击访问示例网站</span>
  `, '上传成功', {
    dangerouslyUseHTMLString: true, // 必须开启这个选项才能插入HTML字符串
    confirmButtonText: 'OK',
  })
}


// 表单关闭时提交
async function confirm() {
  // 表单验证
  unref(formRef).validate(async (valid) => {
    if (!valid) return;
    let submitForm = cloneDeep(form.model);
      const { error, data } = await api.goods.upload(submitForm);
      if (error == 0) {
		// open();
        emit('modalCallBack', { event: 'confirm', data });
      }
  });
}



</script>
<style lang="scss" scoped>
	.title{
		font-family: Source Han Sans;
		font-size: 26rpx;
		font-weight: normal;
		line-height: normal;
		letter-spacing: -0.03em;
		font-variation-settings: "opsz" auto;
		font-feature-settings: "kern" on;
		color: #3D3D3D;
		margin-bottom:70px;
		margin-left:50px;
		display: flex;
	}
	.xz{
		margin-left: 70px;
	}
</style>
  